/*
 * @Author: swf 
 * @Date: 2019-06-27 16:45:34 
 * @Last Modified by: swf
 * @Last Modified time: 2019-06-27 16:50:10
 */



/**
 * 画棋盘
 *
 * @param {*} n 棋盘交叉点总数 n*n
 */
function drawGobang(n) {

    for (let i = 0; i < n; i++) {
        piecesArr[i] = [];
        for (let j = 0; j < n; j++) {
            piecesArr[i][j] = '0';

            let chunk = document.createElement('div');
            // 添加 data-id 属性 方便识别
            chunk.setAttribute('data-id', 'chess_' + i + '_' + j);
            chunk.classList.add('chunk')
            // 棋盘边界特出处理
            if (i == 0) {
                chunk.classList.add('top')
            }
            if (i == n - 1) {
                chunk.classList.add('bottom')
            }
            if (j == 0) {
                chunk.classList.add('left')
            }
            if (j == n - 1) {
                chunk.classList.add('right')
            }
            document.querySelector('#gobang').appendChild(chunk)

        }
    }


}

// 下棋
function playChess() {
    document.querySelector('#gobang').addEventListener('click', function (e) {

        if (!isOver) {
            let el = e.target;
            let i = Number(el.getAttribute('data-id').split("_")[1]);
            let j = Number(el.getAttribute('data-id').split("_")[2]);
            let className = el.className;
            if (piecesArr[i][j] == 0) {
                // 未点击过
                el.classList.add('clicked');
                if (colorOrder == 'black') {
                    el.classList.add('black');
                    piecesArr[i][j] = 'black';
                    judgeWin(i, j, 'black');
                    document.querySelector('#orderHint').innerHTML = '轮到白色下';
                } else {
                    el.classList.add('white');
                    piecesArr[i][j] = 'white';
                    judgeWin(i, j, 'white');
                    document.querySelector('#orderHint').innerHTML = '轮到黑色下';

                }
                colorOrder = colorOrder === 'black' ? 'white' : 'black'
            }
        }
    })
}




/**
 * 胜利判断
 *
 * @param {*} i 落子的坐标x [0-n)
 * @param {*} j 落子的坐标y [0-n)
 * @param {*} color 棋子颜色
 */
function judgeWin(i, j, color) {
    let x, y, s; // x：数组下标i，y数组下表j，s：连续同一颜色的个数
    // 垂直方向 
    s = 1
    for (x = i + 1; x < n && x < i + 5; x++) {

        if (piecesArr[x][j] == color) {
            s++;
            gameOver(s, color)
        } else {
            break;
        }
    }

    for (x = i - 1; x >= 0 && x > i - 5; x--) {
        if (piecesArr[x][j] == color) {
            s++;
            gameOver(s, color)
        } else {
            break;
        }
    }
    // 水平方向
    s = 1;
    for (y = j + 1; y < n && y < j + 5; y++) {
        if (piecesArr[i][y] == color) {
            s++;
            gameOver(s, color)
        } else {
            break;
        }
    }
    for (y = j - 1; y >= 0 && y > j - 5; y--) {
        if (piecesArr[i][y] == color) {
            s++;
            gameOver(s, color)
        } else {
            break;
        }
    }

    // 45°方向
    s = 1;
    for (x = i + 1, y = j + 1; x < n && x < i + 5 && y < n && y < j + 5; x++ , y++) {

        if (piecesArr[x][y] == color) {
            s++;
            gameOver(s, color)
        } else {
            break;
        }
    }

    for (x = i - 1, y = j - 1; x >= 0 && x > i - 5 && y >= 0 && y > j - 5; x-- , y--) {

        if (piecesArr[x][y] == color) {
            s++;
            gameOver(s, color)
        } else {
            break;
        }
    }


    // 135°方向 
    s = 1;
    for (x = i - 1, y = j + 1; x >= 0 && x > i - 5 && y < n && y < j + 5; x-- , y++) {

        if (piecesArr[x][y] == color) {
            s++;
            gameOver(s, color)
        } else {
            break;
        }
    }

    for (x = i + 1, y = j - 1; x < n && x < i + 5 && y >= 0 && y > j - 5; x++ , y--) {

        if (piecesArr[x][y] == color) {
            s++;
            gameOver(s, color)
        } else {
            break;
        }
    }
}

/**
 * 结束函数
 *
 * @param {*} s 棋子个数
 * @param {*} color 棋子颜色
 */
function gameOver(s, color) {
    if (s == 5) {
        isOver = true;
        if (color == 'black') {
            // 添加黑子胜利样式
            document.querySelector('#gobang').classList.add('black-win')

        } else {
            document.querySelector('#gobang').classList.add('white-win')
        }
    }
}






let n = 20;
let colorOrder = 'black';  //下棋顺序。默认黑色先
let isOver = false;
let piecesArr = []; //棋子数组

drawGobang(n);
playChess();
